<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','名称')">
                <a-input :placeholder="i18n('form.name','名称')" v-decorator="['name', {rules: [{required: true, message: i18n('form.name','名称','input')}]}]"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                <a-select :placeholder="i18n('form.status','状态')" :options="statusOpt" v-decorator="['status', {initialValue:'YES'}]"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.dateSource','数据源')">
                  <rx-input-button :placeholder="i18n('form.dateSourceName','数据源名称')" :single="true"
                                   v-decorator="['dsAlias', {rules: [{required: false, message: i18n('form.dateSourceName','数据源名称','input')}]}]"
                                   @click="openDataSource" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="buttonRow">
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.variable','常用变量')">
                <a-button @click="insertVal('{authorId}')">{{i18n('form.authorId','授权人ID')}}</a-button>
                <a-button @click="insertVal('{authorName}')">{{i18n('form.authorName','授权人名称')}}</a-button>
                <a-button @click="insertVal('{authorGroupId}')">{{i18n('form.authorGroupId','授权人组ID')}}</a-button>
                <a-button @click="insertVal('{targetPersonId}')">{{i18n('form.targetPersonId','目的人ID')}}</a-button>
                <a-button @click="insertVal('{targetPersonName}')">{{i18n('form.targetPersonName','目的人名称')}}</a-button>
                <a-button @click="insertVal('{targetPersonGroupId}')">{{i18n('form.targetPersonGroupId','目的人组ID')}}</a-button>
                <a-button @click="insertVal('{ids}')">{{i18n('form.ids','所选ID列表，‘，’分割')}}</a-button>
                <a-button @click="insertVal('{names}')">{{i18n('form.names','所选NAME列表，‘，’分割')}}</a-button>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.idField','ID字段')">
                <a-select :placeholder="i18n('form.idField','ID字段')"
                          :options="fieldOpt"
                          v-decorator="['idField', {rules: [{required: true, message: i18n('form.idField','ID字段','select')}]}]"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.nameField','NAME字段')">
                <a-select :placeholder="i18n('form.nameField','NAME字段')"
                          :options="fieldOpt"
                          v-decorator="['nameField', {rules: [{required: true, message: i18n('form.nameField','NAME字段','select')}]}]"
                ></a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.selectSql','查询语句')">
                <a-button @click="onRun">{{i18n('form.execute','执行')}}</a-button>

                <rx-monaco-editor
                  @focus="onSelect('selectSql')"
                  ref="selectSql"
                  v-decorator="['selectSql', {rules: [{required: true, message: i18n('form.selectSql','查询语句','input')}]}]"
                  language="java"
                  style="height:170px;width: 100%;"
                >
                </rx-monaco-editor>

              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.updateSql','更新语句')">
                <rx-monaco-editor
                  @focus="onSelect('updateSql')"
                  ref="updateSql"
                  v-decorator="['updateSql', {rules: [{required: true, message: i18n('form.updateSql','更新语句','input')}]}]"
                  language="java"
                  style="height:170px;width: 100%;"
                >
                </rx-monaco-editor>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.logTemplet','日志内容模板')">
                <a-textarea
                  @focus="onSelect('logTemplet')"
                  ref="logTemplet"
                  :placeholder="i18n('form.logTemplet','日志内容模板')"
                  v-decorator="['logTemplet', {rules: [{required: true, message: i18n('form.logTemplet','日志内容模板','input')}]}]"
                  :rows="4"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </rx-layout>
  </rx-dialog>
</template>
<script>
  import SysTransferSettingApi from '@/api/system/core/sysTransferSetting'
  import {BaseForm, Dialog, RxDialog, RxMonacoEditor,RxInputButton,JsConstant} from "@lowcode/jpaas-common-lib";
  import AppName from "@/assets/js/AppName.js";

  export default {
    name: 'SysTransferSettingEdit',
    mixins: [BaseForm,AppName],
    components: {
      RxDialog,
      RxMonacoEditor,
      RxInputButton
    },
    data() {
      return {
        statusOpt: [{label: this.i18n('form.enable','启用'), value: 'YES'}, {label: this.i18n('form.disable','禁用'), value: 'NO'}],
        selectCtl: "",
        fieldOpt: []
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysTransferSetting",key);
      },
      onload_(values) {
        if (values) {
          this.form.setFieldsValue(values);
          this.onRun();
        }
      },
      get(id) {
        return SysTransferSettingApi.get(id);
      },
      save(values) {
          let ary=this.fieldOpt.filter(item=>{
              return item.value==values.idField;
          })
          if(ary.length==1){
              values.idType=ary[0].dataType;
          }
          //values.idType=
        return SysTransferSettingApi.save(values);
      },
      onRun() {
        var dsAlias = this.form.getFieldValue("dsAlias");
        if(!dsAlias){
          dsAlias="";
        }
        var selectSql = this.form.getFieldValue("selectSql");
        if (!selectSql){
            this.$message.warning(this.i18n("msa.selectNull","请先写查询语句，再执行"));
            return ;
        }
        SysTransferSettingApi.onRun({ds: dsAlias, selectSql: selectSql}).then(res => {
          if (res.success) {
            this.fieldOpt = res.data.fields.map(field => {
              return {label: field.fieldLabel, value: field.fieldName,dataType:field.dataType}
            });
          }
        })
      },
      openDataSource(vm) {
        Dialog.openDataSourceDialog({
          curVm: this, widthHeight: ['1200px', '600px'],
          data:{appName:this.serviceName}
        }, function (self, data) {
          vm.setVal(data.alias);
        })
      },
      onSelect(ctl) {
        this.selectCtl = ctl;
      },
      insertVal(val) {
        if (!this.selectCtl) return;
        if (this.selectCtl == 'logTemplet') {
          var logTemplet = this.form.getFieldValue("logTemplet");
          if (!logTemplet) logTemplet = "";
          this.form.setFieldsValue({logTemplet: logTemplet + val});
          return;
        }
        this.$refs[this.selectCtl].insertContent(val);
      }
    }
  }
</script>
<style >
  .buttonRow .ant-form-item-children  button{
    margin-right: 6px;
  }
</style>
